<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>敏感词管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <link rel="stylesheet" href="../css/menuList.css" media="all">
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }

        .top-panel>.layui-card-body {
            height: 60px;
        }

        .top-panel-number {
            line-height: 60px;
            font-size: 30px;
            border-right: 1px solid #eceff9;
        }

        .top-panel-tips {
            line-height: 30px;
            font-size: 12px
        }

        .tongzhiList {
            margin-top: 7px;
            width: 100%;
        }

        .tongzhiList li {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 28px;
            font-size: 14px;
            font-family: PingFang-SC-Regular;
            font-weight: 400;
            color: blue;
            line-height: 28px;
            margin-top: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <!--<div class="layuimini-container">-->
    <div class="layuimini-main">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs12 layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header" style="height: 70px;">
                        <div class="flexLeft">
                            <span class="carFont">敏感词统计</span>
                        </div>
                        <div class="flexRight">
                            <form class="layui-form layui-form-pane" action="">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">时间段:</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="date" id="date" autocomplete="off"
                                                class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <button type="submit" class="layui-btn layui-btn-primary" lay-submit
                                            lay-filter="search"><i class="layui-icon"></i> 搜 索</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs12 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <div class="flexLeft">
                            <span class="carFont">敏感词管理</span>
                        </div>
                        <div class=" flexRight">
                            <form action="" class="layui-form">
                                <button id="btnAdd" type="button" class="layui-btn layui-btn-green upload " title="添加">
                                    添加
                                </button>

                            </form>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
                        <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs12 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">敏感词话题</div>
                    <div class="layui-card-body">
                        <div class="layui-tab" id="wordList">
                            <ul class="layui-tab-title">
                                <li class="layui-this"></li>
                                <li></li>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">
                                    <ul class="tongzhiList" id="lastNews">
                                        <li></li>
                                    </ul>
                                </div>
                                <div class="layui-tab-item"></div>
                                <div class="layui-tab-item"></div>
                                <div class="layui-tab-item"></div>
                                <div class="layui-tab-item"></div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>


    </div>
    <!--</div>-->
    <script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script src="../js/common.js" charset="utf-8"></script>
    <script>

        layui.use(['form', 'table', 'element', 'laydate', 'echarts'], function () {
            var $ = layui.jquery,
                form = layui.form,
                table = layui.table;
            element = layui.element;
            laydate = layui.laydate;
            echarts = layui.echarts;

            start_date = getDay(-7)
            end_date = getDay(0)
            laydate.render({
                elem: '#date' //指定元素
                , range: true
                , max: 0
                , format: 'yyyy-MM-dd'
                , value: start_date + ' - ' + end_date
            });

            loadecharts(start_date, end_date)

            function getDay(day) {
                var today = new Date();
                var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
                today.setTime(targetday_milliseconds); //注意，这行是关键代码
                var tYear = today.getFullYear();
                var tMonth = today.getMonth();
                var tDate = today.getDate();
                tMonth = doHandleMonth(tMonth + 1);
                tDate = doHandleMonth(tDate);
                return tYear + "-" + tMonth + "-" + tDate;
            }

            function doHandleMonth(month) {
                var m = month;
                if (month.toString().length == 1) {
                    m = "0" + month;
                }
                return m;
            }

            $('#btnAdd').click(function () {
                layer.open({
                    type: 2,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['450px', '200px'], //宽高
                    content: ['addSensitive.html', 'no'],
                    cancel: function (index, layero) {
                        location.reload()
                        return false;
                    }
                });
            });
            loadTable(start_date, end_date)
            function loadTable(start_time, end_time) {
                table.render({
                    elem: '#currentTableId',
                    url: "/api/business/getSensitiveWord/?start_time=" + start_time + "&end_time=" + end_time + "&userId=" + userId,
                    cols: [[
                        { field: 'word', title: '敏感词' },
                        { field: 'create_time', title: '创建时间' },
                        { field: 'creator', title: '创建人' }
                        , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 200 }
                    ]],
                    limits: [5, 10, 15],
                    limit: 5,
                    page: true
                });
            }
            table.on('tool(currentTableFilter)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('您确定要删除么', function (index) {
                        var json = { "id": data.id };
                        $.ajax({
                            type: "get",
                            data: json,
                            async: false,
                            url: "/api/business/deleteSensitiveWord",
                            success: function (result) {
                                if (result.code == 200) {
                                    layer.msg(result.msg);
                                    location.reload();
                                } else {

                                    layer.msg(result.msg);
                                }
                            },
                            error: function (result) {
                                layer.msg("系统异常");
                            }
                        });
                        layer.close(index);
                    });
                }
            });

            getLastNews(start_date, end_date)
            function getLastNews(start_time, end_time) {
                $.ajax({
                    type: "get",
                    async: false,
                    url: "/api/business/getSensitiveWordList?start_time=" + start_time + "&end_time=" + end_time + "&userId=" + userId,
                    success: function (result) {
                        if (result.code = 200) {
                            data = result.data;
                            console.log(data)
                            word_list = data.word_list
                            info = data.result
                            setLastNews(word_list, info)
                        } else {
                            layer.msg(result.msg);
                        }
                    },
                    error: function (result) {
                        layer.msg("系统异常");
                    }
                });
            }

            function setLastNews(wordList, data) {
                htmlstr = '<ul class="layui-tab-title">'
                contentstr = '<div class="layui-tab-content">'
                for (i = 0; i < wordList.length; i++) {
                    if (i == 0) {
                        temp = '<li class="layui-this">' + wordList[i] + '</li>'
                        content_temp = '<div class="layui-tab-item layui-show">'
                    } else {
                        temp = '<li>' + wordList[i] + '</li>'
                        content_temp = '<div class="layui-tab-item">'
                    }
                    htmlstr = htmlstr + temp
                    content = data[wordList[i]]
                    content_list = '<ul class="tongzhiList">'
                    for (j = 0; j < content.length; j++) {
                        // 将敏感话题内容变成可跳转的链接
                        let title = content[j].title;  // 假设后端返回的内容结构中包含 title 字段
                        let link = content[j].link;      // 假设后端返回的内容结构中包含 url 字段
                        li_temp = '<li class="news"><a href="' + link + '" target="_blank">' + title + '</a></li>'
                        content_list = content_list + li_temp
                    }
                    content_list = content_list + '</ul>'
                    content_temp = content_temp + content_list + '</div>'
                    contentstr = contentstr + content_temp
                }
                console.log(htmlstr)
                console.log(contentstr)
                htmlstr = htmlstr + '</ul>' + contentstr
                console.log(htmlstr)
                $("#wordList").html(htmlstr)
            }



            // 监听搜索操作
            form.on('submit(search)', function (data) {
                date = data.field.date
                console.log(date)
                dates = date.split(" - ")
                loadecharts(dates[0], dates[1])
                loadTable(dates[0], dates[1])
                getLastNews(dates[0], dates[1])
                return false;
            });

            function loadecharts(start_time, end_time) {
                /**
                 * 报表功能
                 */
                var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

                xAxis = []
                series = []
                legend = []
                // 查询趋势图
                $.ajax({
                    type: "get",
                    async: false,
                    url: "/api/business/getSensitiveWordByTime/?start_time=" + start_time + "&end_time=" + end_time + "&userId=" + userId,
                    success: function (result) {
                        if (result.code = 200) {
                            data = result.data;
                            xAxis = data.xAxis
                            series = data.series
                            legend = data.legend
                        } else {
                            layer.msg(result.msg);
                        }
                    },
                    error: function (result) {
                        layer.msg("系统异常");
                    }
                });

                var optionRecords = {
                    title: {
                        text: '敏感词统计曲线'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: legend
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '6%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: xAxis
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: series
                };
                echartsRecords.setOption(optionRecords);

                // echarts 窗口缩放自适应
                window.onresize = function () {
                    echartsRecords.resize();
                }
            }



        });
    </script>
</body>

</html>